<template>
	<view :style="_style" class="animate__animated" :class="[_animate]">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "DkDiyBox",
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			_style() {
				const setting = this.item.setting || {}
				let style = {
					...setting.style,
				}
				if (setting.animate) {
					style = Object.assign(style, {
						...setting.animation
					})
				}
				if (setting.is_position) {
					style = Object.assign(style, {
						...setting.position,
						position: 'fixed',
					})
				}
				return style
			},
			_animate() {
				const setting = this.item.setting || {}
				if (setting.animate) {
					return 'animate__' + setting.animate
				} else {
					return ''
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './animate.css'
</style>